// components/custom/pay/pay.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    payeeName: { // 收款人姓名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '收款人姓名', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
      },
    },
    receivableAmount: { // 收款人姓名
      type: Number, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '0', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
      }
    }
  },
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  lifetimes: {
    attached() {
      this.animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease'
      })

      this.animationbg = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease'
      })
      this.animation.translateY(-10).step()
      this.setData({ animation: this.animation.export() })
      
      // 在组件实例进入页面节点树时执行
      var index = 0
      var obj = this.data.pwdArray
      obj[index].isfocus = !obj[index].isfocus
      this.setData({
        pwdArray: obj
      })
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isCloseModal: false,
    isInputPwd: false,
    pwdArray: [
      {
        isfocus: false,
        number: ''
      },
      {
        isfocus: false,
        number: ''
      },
      {
        isfocus: false,
        number: ''
      },
      {
        isfocus: false,
        number: ''
      },
      {
        isfocus: false,
        number: ''
      },
      {
        isfocus: false,
        number: ''
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changePayMode(){
      const that = this
      this.setData(
        {
          isInputPwd: !that.data.isInputPwd
        }
      )
    },
    /**
     * 点击输入框的时候，先判断前几个输入框是否已经有值了。
     * 若没有的话，自动聚焦到第一个没有值的输入框
     */
    positionNoValue(e){
      var index = parseInt(e.target.dataset.index)
      const obj = this.data.pwdArray
      var value = obj[index].number
      var reg = /^[1-9]+[0-9]*]*$/; //判断正整数用/^[1-9]+[0-9]*]*$/
      for(let v= 0;v<obj.length;v++){
        var value = obj[v].number
        if (!reg.test(value)){
          obj[v].isfocus = true
          this.setData({
            pwdArray: obj
          })
          return false
        }
        if (v == obj.length){
          obj[v].isfocus = true
          this.setData({
            pwdArray: obj
          })
          return false
        }
      }
    },
    //输入密码
    inputPwd(e){
      var index = parseInt(e.target.dataset.index)
      var valueLength = e.detail.value.length
      var reg = /^[1-9]+[0-9]*]*$/; //判断正整数用/^[1-9]+[0-9]*]*$/
      const obj = this.data.pwdArray
      var value = obj[index].number
      /**
       * 先判断
       */

      // 判断是删除还是输入 0 删除
      if (valueLength == 0) {
        for(let x = 0; x< obj.length; x++){
          if(x == index){
            // fasle 不是数字 
            if (!reg.test(value)){
              var resetIndex = x == 0? 0 : x-1
              obj[resetIndex].isfocus = true
            }
            else{
              obj[x].number = ''
            }
          }else{
            obj[x].isfocus = false
          }
        }
      }else{
        if ((index + 1) < 6) {
          obj[index].number = parseInt(e.detail.value)
          obj[index + 1].isfocus = !obj[index + 1].isfocus
          var endIndex = index + 1
          // 将 光标后的输入框 全部关闭聚焦状态
          for (let y = endIndex.length; y <= 0; y--) {
            obj[y].isfocus = !obj[y].isfocus
          }
        }else{
          obj[index].number = parseInt(e.detail.value)
          for (let x = 0; x < obj.length; x++) {
            obj[x].isfocus = false
          }
          this.submitInfo()
        }
      }
      this.setData({
        pwdArray: obj
      })
    },
    // 渐出动画
    fadeOut(){
      this.animationbg.opacity(0).step()
      this.animation.opacity(0)
        .translateY(-40).step()
      this.setData({ animation: this.animation.export(), animationbg: this.animationbg.export() })
    },
    bindCancal() {
      const that = this
      this.fadeOut()
      setTimeout(function(){
        that.triggerEvent('cancelevent', {})
      },400)
    },
    submitInfo(){
      const that = this
      that.triggerEvent('submiteven', {})
    }
  }
})
